<script setup>
import avatarUpload from '@/components/personal/avatarUpload.vue';
import personInfo from '@/components/personal/personInfo.vue';
import bus from '@/utils/bus';
import { useUserStore } from '@/stores';
import { ref, onMounted } from 'vue';

const userStore = useUserStore();

bus.on('updateInfo', () => {
  getData();
})

const getData = async () => {
  await userStore.getUser()
}

onMounted(() => {
  getData();
})
</script>
<template>
  <div class="personal">
    <div class="top">
      <avatarUpload :avatar="userStore.user.userImg"></avatarUpload>
      <div class="desc">{{ userStore.user.userName }}</div>

      <router-link to="/" class="link"> > 回到首页</router-link>
    </div>
    <div class="bottom">
      <personInfo :data="userStore.user"></personInfo>
    </div>
  </div>
</template>
<style scoped lang="scss">
.personal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 0;

  .top {
    width: 45rem;
    display: flex;
    align-items: end;

    .desc {
      margin-left: 3rem;
      margin-bottom: 0.5rem;
      font-size: 2.5rem;
      color: #888;
      font-weight: 600;
    }

    .link {
      margin-left: auto;
      font-size: 1.3rem;
      margin-bottom: auto;
      color: #888;

      &:hover {
        color: skyblue;
      }
    }
  }

  .bottom {
    width: 45rem;
    margin-top: 0.5rem
  }
}
</style>
